<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet" />
<link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
<link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
<link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}" />
<link rel="stylesheet" th:href="@{/erp/font/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}" />
<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
<script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/erp/Widget/Validform/5.3.2/Validform.min.js}"></script>
<script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
<script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
<script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript" ></script>
<script th:src="@{/erp/js/lrtk.js}" type="text/javascript" ></script>
<script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
<script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
<title>用户管理</title>
</head>

<body>
<div class="page-content clearfix">
  <div class="administrator">
    <div class="d_Confirm_Order_style">
      <div class="search_style">
        <form>
        <ul class="search_content clearfix">
          <li>
            <label class="l_f">联系人名称：</label>
            <input name="legal" type="text"  class="text_add" placeholder=""  style=" width:150px"/>
          </li>
          <li>
            <label class="l_f">企业名称：</label>
            <input name="companyName" type="text"  class="text_add" placeholder=""  style=" width:150px"/>
          </li>
          <li>
            <label class="l_f">启用状态：</label>
            <select class="select" name="companyStatus" size="1" style=" height:30px">
              <option value=''>请选择</option>
              <option value="on">已启用</option>
              <option value="off">未启用</option>
            </select>
          </li>
          <li>
            <label class="l_f">时间</label>
            <input class="inline laydate-icon" id="start" style=" margin-left:10px;" name="creatTime">
            至
            <input class="inline laydate-icon" id="end" style=" margin-left:10px;" name="creatTime1">
          </li>
          <li style="width:90px;">
            <button type="button" class="btn_search" id="select"><i class="fa fa-search"></i>查询</button>
          </li>
        </ul>
        </form>
      </div>
      <!--操作-->
      <div class="border clearfix" id="btt"> <span class="l_f">

        <a href="javascript:void(0)" class="btn btn-success"><i class="fa fa-check"></i>批量停用</a> </span></div>
      <div class="table_menu_list"  id="testIframe">
        <table class="table table-striped table-bordered table-hover" id="sample-table">
          <thead>
            <tr>
              <th width="25px"><label>
                  <input type="checkbox" class="ace">
                  <span class="lbl"></span></label></th>
              <th width="50px">企业编号</th>
              <th width="80px">联系人</th>
              <th width="140px">企业名称</th>
              <th width="80px">联系方式</th>
              <th width="80px">地址</th>
              <th width="80px">经营范围</th>
              <th width="100px">用户数</th>
              <th width="100px">用户启用数</th>
              <th width="100px">状态</th>
              <th width="170px">操作</th>


            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function () {
    var table = $('#sample-table').dataTable({
      "autoWidth": false,//当重复刷新表格时，我的页面会出现变形的，现象，加了这个就好了
      searching:false,
      serverSide: true,   //开始服务器分页
      aoColumnDefs: [
        {"orderable": false, "aTargets": [0,1, 2, 3, 4, 5,6,7,8,9,10]}// 制定列不参与排序
      ],
      ajax: {
        url : '/account/page',
        type : 'post',
        data : function (d) {
          var data = $('form').serialize();   //获取查询条件

          //获取分页信息
          var searchParams= {
            start :  d.start,
            length : d.length,
          };
          data = data + '&' + $.param(searchParams);
          return data;
        }
      },
      columns : [

        {
          "data": "id", "createdCell": function (td, cellData, rowData, row, col) {
            $(td).empty().append('<label>\n' +
                    '                  <input type="checkbox" class="ace" name="del">\n' +
                    '                  <span class="lbl"></span></label>');
          }
        },
        { "data": "id" },
        { "data": "legal" },
        { "data": "companyName" },
        { "data": "legalTel" },
        { "data": "companyAddress" },
        { "data": "businessScope" },
        { "data": "user.staffNumber" },
        { "data": "user.startNumber" },
        {
          "data": "companyStatus", "createdCell": function (td, cellData, rowData, row, col) {
            $(td).addClass("td-status")
            if(cellData=="on"){
              $(td).empty().append('<span class="label label-success radius">已启用</span>');
            }else if(cellData=="off"){
              $(td).empty().append('<span class="label label-defaunt radius">已停用</span>');
            }

          }
        },


        {
          "data": "companyStatus", "createdCell": function (td, cellData, rowData, row, col) {
            if (cellData == "on") {
              $(td).addClass("td-manage")
               $(td).empty().append('<a onClick="member_stop(this,\''+rowData.id+'\')"  href="javascript:;" title="停用"  class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></a>' + '<a title="编辑" href="/account/findStaff?id='+rowData.id+'"  class="btn btn-xs btn-info" ><i class="fa  bigger-120">详细</i> </a>');
            } else if (cellData == "off") {
              $(td).addClass("td-manage")
            $(td).empty().append('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,\''+rowData.id+'\')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a> ' + '<a title="编辑" href="/account/findStaff?id='+rowData.id+'"  class="btn btn-xs btn-info" ><i class="fa  bigger-120">详细</i> </a>');            }
            }
        },


      ]
    } );


    //搜索按钮事件
    $('#select').click(function () {
      table.fnUpdate();
    })



    $('table th input:checkbox').on('click', function () {
      var that = this;
      $(this).closest('table').find('tr > td:first-child input:checkbox')
              .each(function () {
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
              });

    });

    $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

    function tooltip_placement(context, source) {
      var $source = $(source);
      var $parent = $source.closest('table')
      var off1 = $parent.offset();
      var w1 = $parent.width();

      var off2 = $source.offset();
      var w2 = $source.width();

      if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
      return 'left';
    }

    /*企业-批量停用*/
    $('#btt').click(function () {
      var flag = 1;
      $("input:checkbox[name='del']:checked").each(function () {
        flag = $(this).attr("checked") == true ? 1 : 0;
      });
      if (flag == 1) {
        layer.msg('请选择数据!', {icon: 2, time: 1000});
      } else {
        layer.confirm('确认要停用吗？', function (index) {
          var ids = [];
          //遍历选中的行
          $("input:checkbox[name='del']:checked").each(function () {
            //向数组中添加选中行的id
            ids.push($(this).parent().parent().next().text());
          });
          $.ajax({
            type: 'post',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            url: '/account/updateAllStatus',
            data: JSON.stringify(ids),
            success: function (data) {
              if(data.rs){
              layer.msg('已停用!', {icon: 1, time: 1000});

              window.parent.document.getElementById('iframe').contentWindow.location.reload(true);
              }else{
                layer.msg(data.msg,{icon:2,time:2000});
              }
            }
          })

        });
      }
    })

  })




  /*用户-停用*/
  function member_stop(obj,id){
    layer.confirm('确认要停用吗？',function(index){
      $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this, \''+id+'\')" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');
      $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
      $(obj).remove();

      $.ajax({
        url : '/account/updateStatus',
        data : {
          id : id,
          status : "已停用",
        },
        success : function (data) {
          if(data.rs){
          layer.msg('已停用!',{icon: 5,time:1000});
          }else{
            layer.msg(data.msg,{icon:2,time:2000});
          }
        }
      })





    });
  }
  /*用户-启用*/
  function member_start(obj,id){
    layer.confirm('确认要启用吗？',function(index){
      $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,\''+id+'\')" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
      $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
      $(obj).remove();

      $.ajax({
        url : '/account/updateStatus',
        data : {
          id : id,
          status : "已启用",
        },
        success : function (data) {
          if(data.rs){
          layer.msg('已启用!',{icon: 6,time:1000});
          }else{
            layer.msg(data.msg,{icon:2,time:2000});
          }
        }
      })

    });
  }



</script>




<script type="text/javascript">
$(function() {
	$("#administrator").fix({
		float : 'left',
		//minStatue : true,
		skin : 'green',
		durationTime :false,
		spacingw:50,//设置隐藏时的距离
	    spacingh:270,//设置显示时间距
	});
});
//字数限制
function checkLength(which) {
	var maxChars = 100; //
	if(which.value.length > maxChars){
	   layer.open({
	   icon:2,
	   title:'提示框',
	   content:'您输入的字数超过限制!',
    });
		// 超过限制的字数了就将 文本框中的内容按规定的字数 截取
		which.value = which.value.substring(0,maxChars);
		return false;
	}else{
		var curr = maxChars - which.value.length; //250 减去 当前输入的
		document.getElementById("sy").innerHTML = curr.toString();
		return true;
	}
};
//初始化宽度、高度
 $(".widget-box").height($(window).height()-215);
$(".table_menu_list").width($(window).width());
 $(".table_menu_list").height($(window).height()-215);
  //当文档窗口发生改变时 触发
    $(window).resize(function(){
	$(".widget-box").height($(window).height()-215);
	 $(".table_menu_list").width($(window).width());
	  $(".table_menu_list").height($(window).height()-215);
	})

laydate.render({
  elem: '#start',
  type: 'datetime'
});
laydate.render({
  elem: '#end',
  type: 'datetime'
});





</script>

</body>
</html>

